<template>
	<view class="activity-item">
		<image class="bg-img" @click="goDetail(item.id)" :src="item.file_path" mode="aspectFill"></image>
		<view class="right-item">
		    <view @click="goDetail(item.id)">
				<view class="title text-ellipsis line-colam-2">{{item.name}}</view>
				<view class="place">{{item.type.text}}活动 | {{item.signup_status_text.text}}</view>
				<view class="distance">距离{{item.distance_unit?item.distance_unit:0}}</view>
				<view class="time">距开始：{{timeStr}}</view>
			</view>
			<view class="flex-between opts">
				<view class="price">{{item.charge_type.value == 1 ? '￥'+item.charge_type.price : item.charge_type.text}}</view>
				<view class="op-btn" @click="setRemind(item.id)" v-if="btnType==1">{{btnText}}</view>
				<view class="op-btn has-remind" @click="set" v-if="btnType==2">{{btnText}}</view>
				<view class="op-btn" @click="goDetail(item.id)" v-if="btnType==3">{{btnText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			},
		},
		data() {
			return {
				temp: {},
				timer: null,
				seconds: 0,
				timeStr: '00天00时00分00秒',
				btnText: '',
				btnType: 0
			}
		},
		created() {
			let _self = this
			_self.temp = _self.item
			
			// if (_self.item.signup_status_text.value == 0) {
			// 	if (_self.item.is_remind == 0) {
			// 		_self.btnText = '设置提醒'
			// 		_self.btnType = 1
			// 	} else {
			// 		_self.btnText = '已设置提醒'
			// 		_self.btnType = 2
			// 	}
			// } else {
			// 	_self.btnText = '马上抢票'
			// 	_self.btnType = 3
			// }
			
			// signup_status_text 0：未开始，1：进行中，2：一结束
			if (_self.item.can_buy == 0) {
				_self.btnText = '已报名'
				_self.btnType = 2
			} else if (_self.item.signup_status_text.value == 0) {
				if (_self.item.is_remind == 0) {
					_self.btnText = '提醒报名'
					_self.btnType = 1
				} else {
					_self.btnText = '已设置提醒'
					_self.btnType = 2
				}
			} else if (_self.item.signup_status_text.value == 2) {
				_self.btnText = '已结束'
				_self.btnType = 2
			} else {
				_self.btnText = '我要报名'
				_self.btnType = 3
			}
			
			_self.timer = setInterval(() => {
				let time = _self.temp.activity_time_start_stamp * 1000
				_self.countDown(time)
			}, 1000)
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		methods: {
			setRemind(id) {
				let _self = this
				
				let callback = function(){
					uni.showLoading({
						title: '正在提交',
						mask: true
					})
					
					_self._post('plus.activity.Remind/Remind', {
					    activity_id: id
					}, (res) => {
						uni.hideLoading();
						if (res && res.code == 1) {
							uni.showModal({
							    title: '设置成功',
							    content: '活动报名开始会有消息通知您。请留意微信通知消息哦~！',
								confirmColor:'#2A82FF',
								showCancel: false,
							    success: function (res) {
							        if (res.confirm) {
										
							        } else {
							            console.log('用户取消')
							        }
							    }
							})
							_self.btnText = '已设置提醒'
							_self.btnType = 2
						}
					    _self.loading = false;
					})
				};
				let temlIds = ['ZFuaFHyOJnY9L_hdZypr4aqzKea0IhuHE0el8gVC5BI']
				_self.subMessage(temlIds, callback);
			},
			set() {
				uni.showModal({
				    title: '设置成功',
				    content: '活动报名开始会有消息通知您。请留意微信通知消息哦~！',
					confirmColor:'#2A82FF',
					showCancel: false,
				    success: function (res) {
				        if (res.confirm) {
							
				        } else {
				            console.log('用户取消')
				        }
				    }
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pagesActivity/activity/activity/detail?id='+id
				})
			},
			startData() {
				this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
				if (this.seconds <= 0) {
					return
				}
				this.countDown()
				this.timer = setInterval(() => {
					this.seconds--
					if (this.seconds < 0) {
						this.timeUp()
						return
					}
					this.countDown()
				}, 1000)
			},
			timeUp() {
				clearInterval(this.timer)
			},
			countDown(value) {
				let _self = this
				var the = new Date(parseInt(value))
				var date = the - new Date()
				if (date <= 0) {
					_self.temp.leftTime = '00天00时00分00秒'
					this.timeUp()
					return
				}

				var days = Math.floor(date / 1000 / 60 / 60 / 24) // 从这里开始
				var daysmod = date - days * 24 *60 * 60 * 1000 
				var hours = Math.floor(daysmod / 1000 / 60 / 60) 
				var hoursmod = date - (days * 24 *60 * 60 * 1000) - (hours * 1000 * 60 * 60) 
				var minutes = Math.floor(hoursmod / 1000 / 60)
				var minutesmod = date - (days * 24 *60 * 60 * 1000) - (hours * 1000 * 60 * 60) - (minutes * 1000 * 60)
				var seconds = Math.floor(minutesmod / 1000) // 到这里结束，是将总毫秒转化成对应天数+小时数+分钟数+秒数的转换方法
				
				let timeStr = ''
				if (days < 0) {
					days = 0
				}
				if (hours < 0) {
					hours = 0
				}
				if (minutes < 0) {
					minutes = 0
				}
				if (seconds < 0) {
					seconds = 0
				}
				
				_self.timeStr = days + '天' + hours + '时' + minutes + '分' + seconds + '秒'
				return
			},
			pickserve() {
				this.$emit('pickserve', this.temp.id)
			}
		}
	}
</script>

<style lang="scss">
	.activity-item {
		display: flex;
	}
	.right-item {
		width: 330rpx;
		.title {
			color: #373840;
			font-weight: 400;
			font-size: 30rpx;
		}
		.place {
			color: #A4A4AC;
			font-size: 24rpx;
		}
		.distance {
			color: #A4A4AC;
			font-size: 24rpx;
		}
		.time {
			color: #F63E36;
			font-size: 24rpx;
		}
		.opts {
			.price {
				color: #F63E36;
				font-size: 32rpx;
				font-weight: 400;
			}
			.op-btn {
				background-color: #2A82FF;
				border-radius: 50rpx;
				color: #ffffff;
				font-size: 24rpx;
				width: 130rpx;
				text-align: center;
				height: 50rpx;
				line-height: 50rpx;
			}
			.has-remind {
				background-color: #A4A4AC;
				color: #ffffff;
			}
		}
	}
	.bg-img {
		width: 336rpx;
		height: 240rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
</style>
